/**
*作品：mixin.scss
*更新：2021年01月07日
*简介：一个基于scss的样式工具库，封装了常用mixin,帮助您更轻松的书写scss代码。
*/

/*-------------------------------------
├   布局                              ┆
└------------------------------------*/

//文字图片居中
@mixin center-table {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

//居中css3平移方式,请给父元素相对定位
@mixin center-translate {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

//居中flex方式
@mixin center-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

//遮罩层全屏
@mixin over-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

//遮罩层区域
@mixin over-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

//容器宽高比，让图片保持宽高比
// 100* 1/1 = 100%
// 100* 3/4 = 75%
@mixin ratio($padding-top: 100%) {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: $padding-top;
    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

//扩展点击区域
@mixin extend-click($extend: -10px) {
    position: relative;
    &::before {
        content: "";
        position: absolute;
        top: $extend;
        left: $extend;
        right: $extend;
        bottom: $extend;
    }
}

//定宽居中页面布局
@mixin layout-page($width: 1200px) {
    width: $width;
    margin-left: auto;
    margin-right: auto;
}

/*-------------------------------------
├   字体                              ┆
└------------------------------------*/

//字体大小和行高
@mixin fz($fz: 12px, $lh: 1.15) {
    font-size: $fz;
    line-height: $lh;
}

//字体颜色+自身hover颜色
@mixin color-hover($color, $hovercolor) {
    color: $color;
    &:hover {
        color: $hovercolor;
    }
}

//辅助性文字（灰色）
@mixin assist-font($color: #b0b0b0, $fz: 14px) {
    color: $color;
    font-size: $fz;
}

//禁止换行，文本溢出省略号显示（一行）
@mixin ellipsis() {
    white-space: nowrap;
    word-wrap: break-word;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
}

//文本溢出省略号显示(多行)
// 只支持 webkit 浏览器, 解决方案：高度 = 行高*行数
// height: 90px; line-height: 30px; -webkit-line-clamp: 3;
@mixin ellipsis-mult($n: 3) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $n;
    word-break: break-all;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}

//文字从右至左排版
@mixin retext-right {
    direction: rtl;
    unicode-bidi: bidi-override;
}

//文字从上至下排版
@mixin retext-top {
    writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

//文字透明
@mixin transparent-text {
    font: 0/0 serif;
    text-shadow: none;
    color: transparent;
}

// 文字隐藏（常用于SEO优化）
// <a href="" title="Logo SEO 优化 "><h1 class="logo">xx</h1></a>
@mixin hidden-text {
    text-indent: -9999px;
    overflow: hidden;
    text-align: left;
}

//文字外发光效果
@mixin glow-text($r: 10px, $color: gold) {
    text-shadow: 0 0 $r $color;
}

/*-------------------------------------
├   图像                              ┆
└------------------------------------*/

// 用 max-width 来防止图片撑破容器
@mixin max-img() { display: block; max-width: 100%; height: auto; }

//2x 3x 背景图片
@mixin bg-image($url) {
    background-image: url("$url + '@2x.png'");
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        background-image: url("$url + '@3x.png'");
    }
}

// 全屏大图背景
@mixin fullscreen-bg($url) {
    width: 100vw;
    height: 100vh;
    background: url($url) no-repeat 50% 50%;
    background-size: cover;
}

// 滤镜: 将彩色照片显示为黑白照片
@mixin grayscale() {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

/*-------------------------------------
├   动效                              ┆
└------------------------------------*/

// 链接默认无下划线，hover后有下划线的样式
@mixin hover-link() {
    text-decoration: none;
    &:hover { text-decoration: underline; }
}

// 将链接变成默认的文字样式
@mixin unstyled-link() {
    color: inherit;
    cursor: inherit;
    text-decoration: inherit;
    &:active, &:focus { outline: none; }
}

// 盒子阴影
// box-shadow: 水平阴影的位置, 垂直阴影的位置, 模糊距离, 阴影的大小, 阴影的颜色, 阴影开始方向（默认是从里往外，设置inset就是从外往里）;
// box-shadow: h-shadow v-shadow blur spread color inset;
@mixin box-shadow() {
    box-shadow: 0px 14px 26px 0px rgba(0, 0, 0, 0.1);
}

/*-------------------------------------
├   功能                              ┆
└------------------------------------*/

// 浮动, 兼容 IE6
@mixin fl() { float: left; *display: inline; _display:inline; }
@mixin fr() { float: right; *display: inline; _display:inline; }

//清除浮动
@mixin clearfix() {
    &:before, &:after { content: " "; display: table; clear: both; }
}

// 禁止文本被选择
@mixin user-select() { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }


// 隐藏鼠标手势
@mixin hide-cursor() { cursor: none !important; }

// 鼠标禁用样式，但仍然可以触发事件
// <input type="text" disabled="disabled">
@mixin disabled() { cursor: not-allowed; }

// 禁用元素事件
// 1. 阻止任何点击动作的执行
// 2. 使链接显示为默认光标(cursor:default)
// 3. 阻止触发hover和active状态
// 4. 阻止JavaScript点击事件的触发
@mixin pointer-events() { pointer-events: none; }

// 首字下沉
@mixin first-letter($font-size: 6em) {
    &::first-letter{
        float: left;
        line-height: 1;
        font-size: $font-size;
    }
}

// 特殊标记段落第一行
@mixin first-line($color: red) {
    &::first-line{
        color: $color;
    }
}

// 美化选中文本
@mixin beauty-select($color: #fff, $bg-color: #6bc30d) {
    &::selection{
        color: $color;
        background-color: $bg-color;
        text-shadow: none;
    }
}

// 美化占位符 placeholder 样式
@mixin beauty-placeholder($fz, $color: #999, $align: left) {
    &:-moz-placeholder { font-size: $fz; color: $color; text-align: $align; }
    &:-ms-input-placeholder { font-size: $fz; color: $color; text-align: $align; }
    &::-webkit-input-placeholder { font-size: $fz; color: $color; text-align: $align; }
}

